<template>
  <table class="table">
    <thead>
    <tr>
      <th>变动类型</th>
      <th>资产类别</th>
      <th>资产名称</th>
      <th>变动前内容</th>
      <th>变动后内容</th>
      <th>变动周期</th>
      <th>关联凭证</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="(item,index) in items">
      <td>{{item.item1}}</td>
      <td>{{item.item2}}</td>
      <td>{{item.item3}}</td>
      <td>{{item.item4}}</td>
      <td>{{item.item5}}</td>
      <td>{{item.item6}}</td>
      <td>{{item.item7}}</td>
      <td>
        <button v-on:click="remove(index)">删除</button>
      </td>
    </tr>
    <tr>
      <td><input v-model="item.item1"/></td>
      <td><input v-model="item.item2"/></td>
      <td><input v-model="item.item3"/></td>
      <td><input v-model="item.item4"/></td>
      <td><input v-model="item.item5"/></td>
      <td><input v-model="item.item6"/></td>
      <td><input v-model="item.item7"/></td>
      <td>
        <button @click="insert">保存并新增</button>
      </td>
    </tr>
    </tbody>
  </table>
</template>

<script>
  export default {
    data() {
      return {
        item: {'item1': '', 'item2': '', 'item3': '', 'item4': ''},
        items: [
          {
            'item1': '新增',
            'item2': '01',
            'item3': '房屋',
            'item4': '300,000.00',
            'item5': '300,000.00',
            'item6': '2017年第一期',
            'item7': '暂无'
          },
          {
            'item1': '新增',
            'item2': '02',
            'item3': '电脑',
            'item4': '4,000.00',
            'item5': '4,000.00',
            'item46': '2017年第一期',
            'item7': '暂无'
          }
        ]
      }
    },
    methods: {
      insert: function () {
        this.items.push(this.item)
      },
      remove: function (index) {
        this.items.splice(index, 1)
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  tr, th {
    text-align: center;
  }

  .table {
    width: 100%;
    background: #FAFAFA;
  }

  thead {
    border-radius: 10px;
  }

  thead tr {
    border: 1px solid #C1CED8;
  }

  thead tr th {
    padding: 30px 0;
    background: #E1E9EF;
    white-space: nowrap;
  }

  tbody tr {
    border: 1px solid #C1CED8;
  }

  tbody tr:nth-child(odd) {
    background: #F0F4F7;
  }

  tbody tr td {
    padding: 30px 0;
  }

  input {
    width: 80%;
    height: 30px;
    line-height: 30px;
    font-size: 20px;
    border: 1px solid #C1CED8;
    border-radius: 5px;
  }

  button {
    margin: 0 5px;
    min-width: 100px;
    height: 30px;
    line-height: 30px;
    background: #fff;
    border: 1px solid #C1CED8;
    font-size: 14px;
  }
</style>
